<template>
  <!-- 查询条件 -->
  <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
  <div class="business_tip">
    <el-icon class="icon_warn"><Warning /></el-icon>
    <div style="margin-right: 36px"
      >商机预计总金额：<span>￥{{ numFormat(businessNum.amount) }}</span></div
    >
    <div
      >已赢单金额：<span>￥{{ numFormat(businessNum.win_amount) }}</span></div
    >
  </div>
  <!-- 查询结果 -->
  <ZwTable
    ref="tableRef"
    class="table-box"
    :option="tableOption"
    :fetch-params="state.searchParams"
    :fetch-api="fetchApi()"
    @select="onSelect"
    @selection-change="onSelectionChange"
    @select-all="onSelectAll"
    @currentChange="onCurrentChange"
    @sizeChange="onSizeChange"
  />
</template>
<script setup lang="tsx">
  import { ref, reactive, computed, onMounted } from 'vue'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import ZwTable from '@/components/zw/table/Table'
  import { deepCopy } from '@/utils/helper'
  import { numFormat } from '@/utils/utils'
  import router from '@/router'
  import { getBusinessList, getProcessSelect, getWorkflowSelect, businessStaticNum } from '@/api/salesleads/salesmanagement/business'
  const businessNum = ref({})
  const defaultParams = {
    workflow_id: '', //商机流程ID
    stage_id: '', //商机流程阶段ID
    belong_uid: '', //归属员工
    predict_time: '', //预计赢单
    stage_state: 0,
    page_size: 15,
    page: 1,
    cust_id: +router.currentRoute.value.query?.id
  }
  const tableRef = ref<HTMLElement | null>(null)
  const WorkFlowList = ref([])
  const props = defineProps(['isCompany'])
  // const searchParams = ref(deepCopy(defaultParams))
  const state = reactive({
    searchParams: deepCopy(defaultParams)
  })
  const getWorkFlow = async (val?: any) => {
    if (!val) return
    state.searchParams.workflow_id = val
    WorkFlowList.value = await getProcessSelect({
      workflow_id: val
    })
  }
  const searchOption = [
    {
      label: '商机流程',
      name: 'workflow_id',
      value: '',
      type: 'select',
      placeholder: '请选择商机阶段',
      change: (val: any) => (state.searchParams.workflow_id = val),
      fetchOptionApi: async () => await getWorkflowSelect({ state: 'all' }),
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '商机阶段',
      name: 'stage_id',
      value: '',
      type: 'select',
      placeholder: '请选择商机阶段',
      fetchOptionApi: async () => {
        if (!state.searchParams.workflow_id) return
        const res: any = await getProcessSelect({
          workflow_id: state.searchParams.workflow_id
        })
        return res
      },
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '归属员工',
      name: 'belong_uid',
      value: '',
      type: 'select',
      placeholder: '请选择归属员工',
      popperClass: 'zw-hide_select_option',
      isUserSelect: true,
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '预计赢单',
      name: 'predict_time',
      value: '',
      type: 'datePicker',
      datePickerType: 'date',
      valueFormat: 'YYYY-MM-DD',
      placeholder: '选择时间',
      defaultTime: new Date(),
    }
  ]

  const search = (v?: any) => {
    const params = {
      stage_state: state.searchParams.stage_state,
      cust_id: state.searchParams.cust_id,
      page_size: v?.page_size || 15,
      ...v
    }
    state.searchParams = deepCopy(params)
  }

  const reset = () => {
    state.searchParams = deepCopy(defaultParams)
  }
  const tableOption = [
    {
      prop: 'business_code',
      label: '商机编号',
      width: 250
    },
    {
      prop: 'name',
      label: '商机名称',
      width: 300,
      render({ row }) {
        return (
          <>
            <div>{row.name}</div>
            <el-progress percentage={row.win_rate} color={['#5AB8F9', '#59D2A0', '#FF5A58'][row.state - 1]} />
          </>
        )
      }
    },
    {
      prop: 'stage_name',
      label: '商机阶段'
    },
    {
      label: '联系人',
      width: 100,
      render: ({ row }) => <span>{props.isCompany ? row.cust_info.contact_name : row.cust_info.name}</span>
    },
    {
      label: '商机金额',
      width: 130,
      render: ({ row }) => <span>{numFormat(row.amount)}</span>
    },
    {
      prop: 'predict_time',
      label: '预计赢单时间',
      width: 180
    },
    {
      prop: 'belong_dept_name',
      label: '归属员工',
      width: 200,
      render: ({ row }) => (
        <div>
          <span>{row.belong_info.name}</span>-<span>{row.belong_dept_name}</span>
        </div>
      )
    },
    {
      prop: 'created_name',
      label: '创建人',
      width: 100
    },
    {
      prop: 'created_at',
      label: '创建时间',
      width: 180
    },
    {
      prop: 'operate',
      label: '操作',
      width: 120,
      fixed: 'right',
      isOperate: true,
      renderOperate({ row }) {
        return (
          <>
            <ElButton
              size="small"
              onClick={() => {
                router.push('/salesleads/salesmanagement/business/detail?id=' + row.business_id)
              }}
            >
              查看
            </ElButton>
          </>
        )
      }
    }
  ]

  const fetchApi = () => {
    // 获取文件列表
    return getBusinessList
  }
  //
  const getStaticNum = () => {
    businessStaticNum({ cust_id: router.currentRoute.value.query?.id }).then((res: any) => {
      businessNum.value = res
    })
  }
  onMounted(() => {
    getStaticNum()
  })
  defineExpose({
    fetchApi
  })
</script>
<style lang="scss" scoped>
  .business_tip {
    height: 40px;
    background: #fffaf9;
    border: 1px solid #ffc69e;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    .icon_warn {
      font-size: 16px;
      color: #ff6b00;
      margin-right: 5px;
    }
    span {
      color: #33302d;
      font-weight: 700;
    }
  }
</style>
